
<!-- setup Vue 提供的语法糖，定义 UI 中即可使用 -->
<script setup lang="ts">
import { ref } from 'vue';


  const imgUrl = ref('https://img1.baidu.com/it/u=795781548,2015246300&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=591')

const changeImg = () => {
    imgUrl.value = 'https://img1.baidu.com/it/u=188768877,1144324302&fm=253&fmt=auto&app=120&f=JPEG?w=425&h=239'
  }

</script>

<!-- 结构 -->
<template>
  <!-- v-bind 基本用法 v-bind:属性名  简写是 :属性名 -->
 <!-- <img @click="changeImg" v-bind:src="imgUrl" alt=""> -->
 <img @click="changeImg" :src="imgUrl" alt="">
</template>


<!-- 样式 -->
<style scoped>
  img{
    width: 200px;
    height: 200px;
  }
</style>